window.onload = function () {
  // 发送请求获取数据
  axios
    .get("http://127.0.0.1:8000/chartData/")
    .then((response) => {
      // 处理返回的数据
      const data = response.data;
      console.log(data);
      departOption.xAxis.data = data.departInfo.name
      departOption.series[0].data = data.departInfo.value
      departChart.setOption(departOption);

      monthOption.xAxis.data = data.monthInfo.name
      monthOption.series[0].data = data.monthInfo.value
      monthChart.setOption(monthOption);

    })
    .catch((error) => {
      console.log("请求失败");
    });
};

// 基于准备好的dom，初始化echarts实例
const departDemo = document.getElementById("depart");
const departChart = echarts.init(departDemo, "dark");

// 指定图表的配置项和数据
const departOption = {
  title: {
    text: "各部门人员分配",
    left: "center",
    top: "20px",
    textStyle: {
      fontFamily: "华文细黑",
    },
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
    top: "10px",
    right: "10px",
  },
  tooltip: {
    // 鼠标悬浮提示框显示 X和Y 轴数据
    trigger: "axis",
    formatter: "{b0}: {c0}",
    backgroundColor: "rgba(32, 33, 36,.7)",
    borderColor: "rgba(32, 33, 36,0.20)",
    borderWidth: 1,
    textStyle: {
      // 文字提示样式
      color: "#fff",
      fontSize: "12",
    },
  },
  grid: {
    left: "70px",
    top: "70px",
    right: "50px",
    bottom: "50px",
  },
  xAxis: {
    data: [],
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: "9",
      },
    },
  },
  yAxis: {
    // min: 0.7, // 起始
    // max: 0.84, // 终止
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: "12",
      },
    },
  },
  series: [
    {
      type: "bar",
      data: [],
      barWidth: "50%",
    },
  ],
};
// 使用刚指定的配置项和数据显示图表。


//  ------------------------------ 

var monthDemo = document.getElementById('month');
var monthChart = echarts.init(monthDemo, 'dark');

var monthOption = {
    title: {
        text: "交易额变化趋势",
        left: "center",
        top: "20px",
        textStyle: {
          fontFamily: "华文细黑",
        },
      },
    toolbox: {
        feature: {
          saveAsImage: {},
        },
        top: "10px",
        right: "10px",
      },
      tooltip: {
        // 鼠标悬浮提示框显示 X和Y 轴数据
        trigger: "axis",
        formatter: "{b0}: {c0}",
        backgroundColor: "rgba(32, 33, 36,.7)",
        borderColor: "rgba(32, 33, 36,0.20)",
        borderWidth: 1,
        textStyle: {
          // 文字提示样式
          color: "#fff",
          fontSize: "12",
        },
      },
      grid: {
        left: "100px",
        top: "70px",
        right: "50px",
        bottom: "50px",
      },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    }
  ]
};

// 

var levelDemo = document.getElementById('level');
var levelChart = echarts.init(levelDemo, 'dark');

var levelOption = {
    title: {
        text: "业务优先级比重",
        left: "center",
        top: "20px",
        textStyle: {
          fontFamily: "华文细黑",
        },
      },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '20%',
    left: '30px',
    itemHeight: 10,
        itemWidth: 20,
        textStyle: {
          fontSize: 9,
        },
    orient: "vertical",
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ["55%", "50%"],
      radius: ['30%', '55%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 3
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
            show: true,
            fontSize: 16,
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '普通' },
        { value: 735, name: '重要' },
        { value: 580, name: '紧急' },
      ]
    }
  ]
};
levelChart.setOption(levelOption);


var statusDemo = document.getElementById('status');
var statusChart = echarts.init(statusDemo, 'dark');

var statusOption = {
    title: {
        text: "业务完成结果比重",
        left: "center",
        top: "20px",
        textStyle: {
          fontFamily: "华文细黑",
        },
      },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '20%',
    left: '30px',
    itemHeight: 10,
        itemWidth: 20,
        textStyle: {
          fontSize: 9,
        },
    orient: "vertical",
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ["55%", "50%"],
      radius: ['30%', '55%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 3
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
            show: true,
            fontSize: 16,
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '未开始' },
        { value: 735, name: '已进行' },
        { value: 580, name: '已完成' },
      ]
    }
  ]
};
statusChart.setOption(statusOption);

